<script setup lang="ts">
import {getSearch} from "@/api/more";
import {ref} from "vue";

let ShList=ref()
getSearch().then(res=>{
    // console.log(res)
    ShList.value = res.rows[9].itemList.map(item=>{
        item.mediaLink = 'http://192.168.5.120:8199' + item.mediaLink
        return item
    })
    // console.log(ShList)
})
</script>

<template>
<div>
    <div id="banner"></div>
    <div id="main">
        <div class="one" v-for="item in ShList" :key="item.id">
            <video :src="item.mediaLink" preload="auto" muted controls poster="@/assets/images/-3c86e6ef156a8d8b.jpg"></video>
            <h5>{{item.title}}</h5>
            <p>{{item.intro}}</p>
            <!--点赞-->
            <div>

            </div>
        </div>
    </div>
</div>
</template>

<style scoped>
#banner{
    width: 375px;
    height: 160px;
    background-image: url("@/assets/images/0bc5f9e6c4b9fc5a1ec0e4a18671f2c.png");
    background-repeat: no-repeat;
    background-size: 375px 160px;
}
#main{
    width: 350px;
    margin: auto;
    margin-top: -70px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;


    .one{
        width: 120.5pt;
        height: 120.5pt;
        margin-bottom: 10px;
    //background-color: #c81127;

        video{
            width: 100%;
            height: 80pt;
        }
        h5{
        //margin-top: -8px;
            height: 15.5px;
            line-height: 7pt;
            font-size: 12px;
        }
        p{
            height: 20px;
            font-size: 10px;
        //background-color: #c81127;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}
</style>